<template>
<div class="address-main">
    <el-card class="card">
        <div slot="header" class="clearfix header">
            <el-button type="primary" @click="addAddress">新增</el-button>
        </div>
        <div>
            <el-table :data="addressList" style="width: 100%" border="" v-loading="loading">
                <el-table-column type="index" width="50" label="序号">
                </el-table-column>
                  <el-table-column header-align="center" align="center" prop="name" label="姓名">
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="phone" label="电话">
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="city" label="城市">
                </el-table-column>
                 <el-table-column header-align="center" align="center" prop="province" label="省份">
                </el-table-column>
                  <el-table-column header-align="center" align="center" prop="region" label="区">
                </el-table-column> 
                  <el-table-column header-align="center" class="detailAddress" align="center" prop="detailAddress" label="详细地址" width="150">
                </el-table-column> 
                <el-table-column header-align="center" align="center" prop="postCode" label="邮政编码">
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="addressName" label="地址名称">
                </el-table-column> 

            
                <el-table-column header-align="center" align="center" label="默认发货">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.sendStatus" :active-value="1" :inactive-value="0" @change="changeSetStatus(scope.row.showStatus, scope.row.id)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="默认收货">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.receiveStatus" :active-value="1" :inactive-value="0" @change="changeReceiveStatus(scope.row.showStatus, scope.row.id)"></el-switch>
                    </template>
                </el-table-column>

                <el-table-column header-align="center" align="center" label="操作" width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="goEditAddress(scope.row.id)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="goDelAddress(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>

    <EditAddress ref="myaddress"></EditAddress>

</div>
</template>

<script>
// import areaList from "@/assets/arealist/index.js"

import EditAddress from '@/views/address/EditAddress'
import {
    findArticles,
    setReceiveOne,
    setSendOne,
    delcompanyAddress,
} from "@/api/address/index";
export default {
    name:'AddressList',
    components: {
        EditAddress
    },
    data() {
        return {
            addressList: [],
            loading:true

        };
    },
    computed: {},
    created() {
        this.init();
    },
    updated(){
        this.init()
    },
    mounted() {},
    methods: {
        init() {
            findArticles().then((res) => {
                if(res.success){
                    this.loading=false
                    this.addressList=res.data.items
                }
            });
        },
        goEditAddress(id) {
            this.$refs.myaddress.dialogVisible=true

            this.$refs.myaddress.init(id)

        },
        goDelAddress(id) {
            this.$confirm("此操作将永久删除该地址, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    delcompanyAddress(id).then((res) => {
                        console.log(res);
                        if (res.success) {
                            this.init();
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                        } else {
                            this.$message.error("删除失败！！！");
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        addAddress(){
            this.$refs.myaddress.dialogVisible=true
            // this.$router.push({name:"addressListEdit"})

        },
        // 设置发货地址
        changeSetStatus(row,id){
            let data={id,row}
            setSendOne(data).then(res=>{
                console.log(res);
                if(res.success){
                    this.init()
                    this.$message.success('编辑成功')
                }else{
                    this.$message.error('编辑失败！！！')
                }
            })

        },
        changeReceiveStatus(row,id){
             let data={id,row}
            setReceiveOne(data).then(res=>{
                console.log(res);
                if(res.success){
                    this.init()
                    this.$message.success('编辑成功')
                }else{
                    this.$message.error('编辑失败！！！')
                }
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.card {
    margin: 30px;
    .detailAddress{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
</style>
